<template>
  <div class="copywriting-dashboard">
    <h2>文案数据看板</h2>
    <el-row :gutter="16" style="margin-bottom: 24px;">
      <el-col :span="6"><el-card>文案总数：{{ totalCount }}</el-card></el-col>
      <el-col :span="6"><el-card>分类数：{{ categoryCount }}</el-card></el-col>
      <el-col :span="6"><el-card>今日新增：{{ todayCount }}</el-card></el-col>
      <el-col :span="6"><el-card>发布数：{{ publishedCount }}</el-card></el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="12">
        <el-card>
          <div class="chart-title">分类分布</div>
          <v-chart :option="categoryPieOption" style="height:300px" />
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div class="chart-title">状态分布</div>
          <v-chart :option="statusPieOption" style="height:300px" />
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="24" style="margin-top: 24px;">
      <el-col :span="12">
        <el-card>
          <div class="chart-title">阅读量Top10</div>
          <v-chart :option="readCountBarOption" style="height:300px" />
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div class="chart-title">
            文案新增趋势
            <el-select v-model="trendDays" size="small" style="margin-left: 12px; width: 80px;">
              <el-option label="7天" :value="7" />
              <el-option label="15天" :value="15" />
              <el-option label="30天" :value="30" />
            </el-select>
          </div>
          <v-chart :option="trendLineOption" style="height:300px" />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import VChart from 'vue-echarts'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { PieChart, BarChart, LineChart } from 'echarts/charts'
import { TitleComponent, TooltipComponent, LegendComponent, GridComponent } from 'echarts/components'

use([
  CanvasRenderer,
  PieChart,
  BarChart,
  LineChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
])

// mock数据
const totalCount = 12
const categoryCount = 4
const todayCount = 2
const publishedCount = 8

const categoryPieOption = {
  tooltip: { trigger: 'item' },
  legend: { top: 'bottom' },
  series: [
    {
      name: '分类分布',
      type: 'pie',
      radius: ['40%', '70%'],
      data: [
        { value: 4, name: '商品推广' },
        { value: 3, name: '活动促销' },
        { value: 2, name: '品牌故事' },
        { value: 3, name: '用户评价' }
      ]
    }
  ]
}
const statusPieOption = {
  tooltip: { trigger: 'item' },
  legend: { top: 'bottom' },
  series: [
    {
      name: '状态分布',
      type: 'pie',
      radius: ['40%', '70%'],
      data: [
        { value: 8, name: '发布' },
        { value: 4, name: '草稿' }
      ]
    }
  ]
}
const readCountBarOption = {
  tooltip: {},
  grid: { left: 60, right: 20, top: 40, bottom: 40 },
  xAxis: { type: 'value' },
  yAxis: {
    type: 'category',
    data: ['文案A', '文案B', '文案C', '文案D', '文案E', '文案F', '文案G', '文案H', '文案I', '文案J'],
    axisLabel: { width: 120, overflow: 'truncate', ellipsis: '...' }
  },
  series: [
    {
      type: 'bar',
      data: [120, 110, 98, 90, 80, 75, 60, 55, 40, 30],
      itemStyle: { color: '#409EFF' }
    }
  ]
}
// 时间选择
const trendDays = ref(7)
const trendLineOption = computed(() => {
  const days: string[] = []
  const today = new Date()
  for (let i = trendDays.value - 1; i >= 0; i--) {
    const d = new Date(today)
    d.setDate(today.getDate() - i)
    days.push(d.toLocaleDateString())
  }
  // mock数据 - 根据天数生成随机数据
  const data = days.map(() => Math.floor(Math.random() * 5) + 1)
  return {
    tooltip: {},
    xAxis: { type: 'category', data: days },
    yAxis: { type: 'value' },
    series: [
      {
        type: 'line',
        data,
        smooth: true,
        areaStyle: { color: 'rgba(64,158,255,0.15)' },
        lineStyle: { color: '#409EFF' },
        symbol: 'circle',
        symbolSize: 8
      }
    ]
  }
})
</script>

<style scoped>
.copywriting-dashboard {
  padding: 24px;
}
.chart-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 12px;
}
</style> 